<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <hr />

    <p>count 值： {{ count }}</p>
    <p>money 值：{{ money }}</p>
    <p>name 值：{{ name }}</p>
    <p>token 值：{{ token }}</p>
    <p>total 值：{{ total }}</p>
    <!-- 今天这种修改方法以后不会用 -->
    <!-- 因为它不规范，今天用这个临时来修改 -->
    <!-- 只是为了看vuex的特点：一个地方变了，所有地方都变 -->
    <button @click="$store.state.count++" class="btn btn-primary">+1</button>
  </div>
</template>

<script>
// const obj = {
//   // 以后我vuex里的count变化了
//   // 我的计算属性count也会跟着改变
//   // 但是得到一个好处，那就是访问时，可以不用写老长了
//   // 直接写count
//   count() {
//     return this.$store.state.count;
//   },

//   money () {

//     return this.$store.state.money
//   },

//   // 写好多个计算属性的函数，麻烦吗？略微麻烦
// };

// 有没有一种可能？vuex它能够帮我提供像上面一样的对象
// 并且自动帮你写计算属性的对应函数
// mapState是vuex帮我们提供的一个辅助函数
// 可以帮我们创建出像上面obj这样的对象
import { mapState } from "vuex";
// const obj = mapState(['count', 'money', 'name', 'token'])
// // mapState它能帮你产生对象，你写count和money，
// // 它就帮你生成了像上面一样的对象
// console.log(obj)

export default {
  name: "Left",

  // 因为计算属性特点：依赖项的值发生改变
  // 结果会自动跟着变
  // 此时，我这个组件的计算属性，只能用vuex里的计算属性了
  // 我想写个别的计算属性，例如计算总价的计算属性
  // 所以最终会把mapState生成的对象里的函数一一展开，然后这样的好处是可以自己再添加计算属性
  computed: {
    
    ...mapState(["count", "money", "name", "token", "obj", "list", "xxx"]),

    // 此时就可以添加自己的计算属性了
    total() {
      return "总价";
    },
  },
};
</script>

<style>
</style>
